<template>
  <div class="salesman-wrapper">
    <div class="top">
      <div class="title-wrapper">
        <div
          v-for="(item, index) of title"
          :key="index"
          class="title"
          @click="titleClick(index)"
        >{{ item }}</div>
      </div>
      <el-button type="primary" @click.native="add">添加</el-button>
    </div>
    <div class="middle">
      <Input ref="searchInput" placeholder="请输入业务员姓名/手机号" @search="handleSearch" />
    </div>
    <div class="bottom">
      <component :is="cmpName" ref="components" :exit-goods="exitGoods" :shop-list="shopList" :table-data="tableData" @storesClick="handleStoresClick" @edit="handleEdit" @forbidden="handleForbidden" />
    </div>
    <add-salesman ref="dialog" :title="dialogTitle" :disabled="disabled" :dialog-data="dialogData" :dialog-visible="dialogVisible" @closeDialog="handleCloseDialog" @cancel="handleCancel" @confirm="handleConfirm" />
    <Pagination class="pagination" :total="total" :page-size="pageSize" :cur-page="currentPage" @nextPage="handleNextPage" />
  </div>
</template>
<script>
import Input from '@/common/input'
import AddSalesman from './addSalesman'
import SalesMan from './salesman'
import Stores from './stores'
import ExistGoods from './existGoods'
import { getSalesManList, addOrEditSalesMan, freezeSalesMan, getSearchList, getShopList, getSalesmanGoodsList } from '@/api/salesman'
import Pagination from '@/common/pagination'
const ERR_OK = 200
export default {
  components: {
    Input,
    AddSalesman,
    SalesMan,
    Stores,
    ExistGoods,
    Pagination
  },
  data() {
    return {
      dialogVisible: false,
      cmpName: SalesMan,
      title: ['业务员管理'],
      page: 1,
      tableData: [],
      shopList: [],
      exitGoods: [],
      total: 0,
      pageSize: 0,
      dialogData: {},
      id: '',
      disabled: false,
      dialogTitle: '添加业务员',
      isAddOrEdit: 'add',
      $index: -1,
      currentPage: 1,
      query: ''
    }
  },
  created() {
    this._getSalesManList(this.page)
  },
  methods: {
    add() {
      this.dialogVisible = true
      this._clearData()
      this.dialogTitle = '添加业务员'
      this.isAddOrEdit = 'add'
      this.disabled = false
    },
    handleCloseDialog() {
      this.dialogVisible = false
    },
    handleCancel() {
      this.dialogVisible = false
    },
    handleConfirm(params) {
      this.dialogVisible = false
      switch (this.isAddOrEdit) {
        case 'add':
          this._addOrEditSalesMan(params)
            .then(() => {
              this._initSalesList()
            })
          break
        case 'edit':
          params.id = this.id
          this._addOrEditSalesMan(params)
            .then(() => {
              this.tableData[this.$index].nickname = params.nickname
              this.tableData[this.$index].remark = params.remark
            })
          break
      }
    },
    handleEdit(data) {
      console.log(data)
      const _data = JSON.parse(JSON.stringify(data.row))
      this.dialogVisible = true
      this._clearData()
      this.dialogData = _data
      this.id = _data.id
      this.disabled = true
      this.dialogTitle = '修改业务员'
      this.isAddOrEdit = 'edit'
      this.$index = data.$index
    },
    handleNextPage(page) {
      this.page = page
      this._initSalesList(this.page)
    },
    handleStoresClick(name, title, id) {
      this.page = 1
      this.currentPage = 1
      this.$refs.searchInput.clear()
      switch (title) {
        case '负责店铺':
          this.cmpName = Stores
          console.log(name, title, id)
          this._getShopList({ page: this.page, id })
          break
        case '现有商品':
          this.cmpName = ExistGoods
          this._getSalesmanGoodsList({ page: this.page, id })
      }
      this.title.push('/' + name + '-' + title)
    },
    handleForbidden(data) {
      const _data = JSON.parse(JSON.stringify(data.row))
      const is_freeze = _data.is_freeze
      switch (is_freeze) {
        case 0:
          this._freezeSalesMan(_data.id, 1)
          data.row.is_freeze = 1
          break
        case 1:
          this._freezeSalesMan(_data.id, 0)
          data.row.is_freeze = 0
          break
      }
    },
    handleSearch(query) {
      this.page = 1
      this.currentPage = 1
      this.query = query
      switch (this.cmpName) {
        case SalesMan:
          this._getSearchList(this.page, this.query)
          break
        case Stores:
          this._getShopList({ page: this.page, condition: this.query })
          break
        case ExistGoods:
          this._getSalesmanGoodsList({ page: this.page, condition: this.query })
          break
      }
    },
    titleClick(index) {
      switch (index) {
        case 0:
          this.cmpName = SalesMan
          this.title.splice(index + 1)
          break
      }
      switch (this.cmpName) {
        case SalesMan:
          this._getSalesManList({ page: this.page })
          break
        case ExistGoods:
          this._getSalesmanGoodsList({ page: this.page })
      }
    },
    _getSalesManList(page) {
      getSalesManList(page)
        .then((res) => {
          if (res.code === 200) {
            this.tableData = res.data.data
            this.total = res.data.total
            this.pageSize = parseInt(res.data.per_page)
            this.currentPage = res.data.current_page
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    _initSalesList() {
      this.tableData = []
      // if (!this.isSearch) {
      //   this._getSalesManList(this.page)
      // } else {
      //   this._getSearchList(this.page, this.query)
      // }
      switch (this.cmpName) {
        case SalesMan:
          this._getSearchList(this.page, this.query)
          break
        case Stores:
          this._getShopList({ page: this.page, condition: this.query })
          break
        case ExistGoods:
          this._getSalesmanGoodsList({ page: this.page, condition: this.query })
          break
      }
    },
    _addOrEditSalesMan(params) {
      return new Promise((resolve, reject) => {
        addOrEditSalesMan(params)
          .then((res) => {
            console.log(res)
            if (res.code === 200) {
              this._success(res)
              resolve()
            }
          })
          .catch(err => {
            console.log(err)
            reject()
          })
      })
    },
    _freezeSalesMan(id, is_freeze) {
      freezeSalesMan(id, is_freeze)
        .then((res) => {
          if (res.code === 200) {
            this._success(res)
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getSearchList(page, condition) {
      getSearchList(page, condition)
        .then((res) => {
          if (res.code === 200) {
            this.tableData = res.data.data
            this.total = res.data.total
            this.currentPage = res.data.current_page
          }
        })
        .catch(err => {
          console.log(err)
          this._warning(err)
        })
    },
    _getSalesmanGoodsList({ id, page, condition }) {
      getSalesmanGoodsList({ id, page, condition })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.total = res.data.total
            this.currentPage = res.data.current_page
            this.pageSize = parseInt(res.data.per_page)
            this.exitGoods = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _getShopList({ page, id, condition }) {
      getShopList({ page, id, condition })
        .then(res => {
          if (res.code === ERR_OK) {
            console.log(res)
            this.shopList = res.data.data
            this.total = res.data.total
            this.currentPage = res.data.current_page
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    _success(res) {
      this.$message({
        message: res.message,
        type: 'success'
      })
    },
    _warning(res) {
      this.$message({
        message: res.message,
        type: 'warning'
      })
    },
    _clearData() {
      this.$refs.dialog.form = {
        username: '',
        nickname: '',
        remark: ''
      }
    }
  }
}
</script>
<style lang="scss" scoped>
@import "@/styles/el-button.scss";
@import "@/styles/el-pagination.scss";
.salesman-wrapper {
  padding: 0 20px;
  box-sizing: border-box;
  min-height: 110vh;
  .top {
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    .title-wrapper {
      display: flex;
      align-content: center;
      .title {
        height: 44px;
        line-height: 44px;
        color: rgba(68, 68, 68, 1);
        font-size: 18px;
        font-family: Roboto;
        font-weight: bold;
        cursor: pointer;
      }
    }
  }
  .bottom {
    margin-top: 16px;
    overflow: hidden;
  }
}
</style>
